<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>leaflet加载地图服务</title>
  <!-- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script> -->
  <link rel="stylesheet" href="./js/leaflet.css">
  <script src="./js/leaflet.js"></script>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }

    .map-box {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="map-box" id="leafletMapService"></div>

  <script>
    let maps = null;
    let mapServiceObj = {
      tdtVecLayer: null,
      tdtImgLayer: null,
    };
    initMap();
    function initMap() {
      maps = L.map('leafletMapService', {
        center: [27.50409, 111.682279],
        zoom: 7,
        minZoom: 3,
        maxZoom: 18,
        zoomControl: true,  // 是否隐藏左上角的缩放
        attributionControl: false, // 是否隐藏右下角的信息显示
        // layers: [tdt_vec, tdt_cva]
      });

      // switchMap('天地图矢量');
      switchMap('天地图影像');
    }

    function switchMap(type) {
      switch (type) {
        case "天地图矢量":
          if (mapServiceObj.tdtVecLayer) maps.removeLayer(mapServiceObj.tdtVecLayer);
          // // 加载天地图矢量图层
          // let tdtVecW = L.tileLayer(
          //   "https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=6a9f4b408cb773ba60fb639f3b713d61",
          //   {
          //     noWrap: true,
          //   }
          // )

          // //  加载天地图矢量注记图层
          // let tdtCvaW = L.tileLayer(
          //   "https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=6a9f4b408cb773ba60fb639f3b713d61",
          //   {
          //     noWrap: true,
          //   }
          // )

          // 加载天地图矢量图层
          let tdtVecW = L.tileLayer(
            "https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=6a9f4b408cb773ba60fb639f3b713d61"
          );

          // 加载天地图矢量注记图层
          let tdtCvaW = L.tileLayer(
            "https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=6a9f4b408cb773ba60fb639f3b713d61"
          );


          mapServiceObj.tdtVecLayer = L.layerGroup([tdtVecW, tdtCvaW]).addTo(maps);
          return;
        case "天地图影像":
          if (mapServiceObj.tdtImgLayer) maps.removeLayer(mapServiceObj.tdtImgLayer);
          let tdtImgW = L.tileLayer("https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=6a9f4b408cb773ba60fb639f3b713d61")
          let tdtCiaW = L.tileLayer("https://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=6a9f4b408cb773ba60fb639f3b713d61")
          mapServiceObj.tdtImgLayer = L.layerGroup([tdtImgW, tdtCiaW]).addTo(maps);
        default:
          break;
      }




    }
  </script>

</body>

</html>